<template>
  <el-form ref="phoneRegisterForm" status-icon :model="phoneRegisterForm" :rules="phoneRegisterRules" auto-complete="on">
    <el-form-item prop="phone">
      <el-input ref="phone" v-model="phoneRegisterForm.phone" placeholder="手机号" name="phone" type="text" auto-complete="on" />
    </el-form-item>

    <el-form-item prop="password">
      <el-input ref="password" v-model="phoneRegisterForm.password" placeholder="密码" name="password" type="password" auto-complete="on" />
    </el-form-item>

    <el-form-item prop="code" class="form-item-code">
      <el-input ref="code" v-model="phoneRegisterForm.code" maxlength="6" type="text" placeholder="短信验证码" name="code" />
      <SendCode ref="code" @run="handleSendCode" />
    </el-form-item>

    <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 20px" @click.native.prevent="handleRegister"> 注 册 </el-button>
  </el-form>
</template>

<script>
import { validatePhone, validatePassword } from '@/utils/validate.js'
import SendCode from '@/components/SendCode'
import { regApi } from '@/api/api.js'

export default {
  name: 'RegByPhone',
  components: {
    SendCode
  },
  data() {
    return {
      loading: false,
      // 手机注册表单信息
      phoneRegisterForm: {
        phone: '',
        code: '',
        password: ''
      },
      // 手机注册验证规则
      phoneRegisterRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: validatePhone
          }
        ],
        code: [{ required: true, trigger: 'blur', message: '请输入短信验证码' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { trigger: 'blur', validator: validatePassword }
        ]
      }
    }
  },
  methods: {
    // 发送验证码
    handleSendCode() {
      this.$refs.phoneRegisterForm.validateField('phone', (valid) => {
        if (!valid) {
          this.$request(regApi.sendPhoneCode, { phone: this.phoneRegisterForm.phone }).then(() => {
            this.$refs.code.start()
            this.$notify({
              title: '成功',
              message: '短信验证码已发送至该手机号，请及时查收',
              //message: `${res.msg}`,
              type: 'success'
            })
          })
        }
      })
    },
    // 注册按钮
    handleRegister() {
      this.$refs.phoneRegisterForm.validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.$request(regApi.phone, { ...this.phoneRegisterForm })
            .then((res) => {
              this.loading = false
              if (res.code === 1) {
                this.$message({
                  message: '注册成功，即将跳转登录页。',
                  type: 'success'
                })
                setTimeout(() => {
                  this.$router.push({ path: '/login' })
                }, 500)
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-code {
  ::v-deep.el-form-item__content {
    background: #fff;
  }
  .el-input {
    width: 75%;
  }
  .el-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
